<template>
  <div class="coupon-wrapper">
    <div class="coupon-tab-wrapper v-flex-row-around border-bottom">
      <div class="tab v-flex-column-around" v-for="(item,index) in tabList" :key="index" @click="toSwitchTab(item,index)">
        <div class="tab-name" :class="{'activeTab':tabFlag === index}">{{item.name}}</div>
        <div class="tab-flag" v-show="tabFlag === index"></div>
      </div>
    </div>
    <div class="tab-content">
      <!--可用的-->
      <div class="coupon-list" v-if="tabFlag === 0">
        <div class="coupon-item">
          <div class="coupon-img">
            <img src="/static/image/center/coupon_enable.png" alt="">
          </div>
          <div class="use-data">
            <div class="use-case v-flex-row-center">
              <div class="use-des">
                <div class="use-money">￥10</div>
                <div class="full-reduction">满20元可使用</div>
              </div>
              <div class="use-intro">
                <div class="use-shop no-wrap">阿里巴巴旗舰店代金券</div>
                <div class="use-exp">2018.12.01-2019.02.03</div>
              </div>
            </div>
          </div>
          <div class="to-use">立即<br>使用</div>
        </div>
      </div>
      <div class="coupon-list" v-if="tabFlag === 0">
        <div class="coupon-item">
          <div class="coupon-img">
            <img src="/static/image/center/coupon_enable.png" alt="">
          </div>
          <div class="use-data">
            <div class="use-case v-flex-row-center">
              <div class="use-des">
                <div class="use-money">￥1000</div>
                <div class="full-reduction">满2000元可使用</div>
              </div>
              <div class="use-intro">
                <div class="use-shop no-wrap">阿里巴巴旗舰店代金券</div>
                <div class="use-exp">2018.12.01-2019.02.03</div>
              </div>
            </div>
          </div>
          <div class="to-use">立即<br>使用</div>
        </div>
      </div>
      <!--失效的-->
      <div class="coupon-list" v-if="tabFlag === 1">
        <div class="coupon-item">
          <div class="coupon-img">
            <img src="/static/image/center/coupon_lose.png" alt="">
          </div>
          <div class="use-data">
            <div class="use-case v-flex-row-center">
              <div class="use-des">
                <div class="use-money lose-text">￥ 10</div>
                <div class="full-reduction lose-text">满20元可使用</div>
              </div>
              <div class="use-intro">
                <div class="use-shop lose-text no-wrap">阿里巴巴旗舰店代金券</div>
                <div class="use-exp lose-text">2018.12.01-2019.02.03</div>
              </div>
            </div>
          </div>
          <div class="lose-img">
            <img src="/static/image/center/lose.png" alt="">
          </div>
        </div>
      </div>
      <div class="coupon-list" v-if="tabFlag === 1">
        <div class="coupon-item">
          <div class="coupon-img">
            <img src="/static/image/center/coupon_lose.png" alt="">
          </div>
          <div class="use-data">
            <div class="use-case v-flex-row-center">
              <div class="use-des">
                <div class="use-money lose-text">￥ 10</div>
                <div class="full-reduction lose-text">满20元可使用</div>
              </div>
              <div class="use-intro">
                <div class="use-shop lose-text no-wrap">阿里巴巴旗舰店代金券</div>
                <div class="use-exp lose-text">2018.12.01-2019.02.03</div>
              </div>
            </div>
          </div>
          <div class="lose-img">
            <img src="/static/image/center/lose.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "coupon",
    data() {
      return {
        tabFlag: 0,
        tabList: [
          { name: "可用代金券" },
          { name: "失效代金券" }
        ]
      };
    },
    methods: {
      toSwitchTab(item, index) {
        this.tabFlag = index;
      }
    }
  };
</script>

<style scoped lang="less">
  .coupon-tab-wrapper {
    height:100rpx;
    color: #B3B4B5;
    background-color: @bg_color;
    position: relative;
  }

  .tab {
    padding: 12rpx 0rpx;

  }

  .tab-name {
    padding: 10rpx 0rpx;
    font-size:@font_size_28;
  }

  .activeTab {
    color: #333;
    font-weight: bold;
  }

  .tab-flag {
    width: 38rpx;
    height: 5rpx;
    background-color: #2B80FF;
    border-radius: 4rpx;
  }

  /*可用的优惠券图片*/
  .tab-content {
    background-color: #fff;
  }

  .coupon-list {
    padding: 13px 14px 15px 15px;
    border-bottom: 1px solid #EDEDED;
  }

  .coupon-img {
    width: 694rpx;
    height: 156rpx;
    & > img {
      width: 694rpx;
      height: 156rpx;
    }
  }

  .coupon-item {
    position: relative;
  }

  .use-case {
    width:467rpx;
    height:124rpx;
    position: absolute;
    top: 18rpx;
    left: 40rpx;
    bottom:32rpx;
  }

  .use-money {
    color: #FF5050;
    font-size:@font_size_36;
    font-weight: bold;
  }

  .use-intro {
    padding: 0rpx 10rpx;
    align-self:center;
  }

  .full-reduction {
    color: #333;
    font-size: @font_size_20;
    font-weight: 400;
  }

  .use-shop {
    width: 273rpx;
    height:26rpx;
    line-height:26rpx;
    color: #333;
    font-size: @font_size_28;
    font-weight: 400;
  }

  .use-exp {
    color: #B3B4B5;
    padding:5rpx 0rpx;
    font-size: @font_size_20;
  }

  .to-use {
    color: #2B80FF;
    font-size: @font_size_32;
    font-weight: bold;
    position: absolute;
    top: 36rpx;
    right: 70rpx
  }

  .lose-img {
    width: 196rpx;
    height: 91rpx;
    position: absolute;
    bottom: 32rpx;
    right: 0rpx;
    & > img {
      width: 196rpx;
      height: 91rpx;
    }
  }

  .lose-text {
    color: #A0A0A0;
  }
</style>
